<template>
  <div class="app">
    <div id="cover"></div>
    <Header></Header>
    <p>{{ count }}</p>
    <p>{{ fullName }}</p>
    <router-link to="/b/1">b  </router-link>
    <router-link to="/app/1">todo </router-link>
    <router-link to="/login"> Login</router-link>
    <transition name="fade">
      <router-view></router-view>
    </transition>
    <Footer></Footer>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapActions,
  mapMutations
} from 'vuex'

import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
import './assets/styles/global.scss'

export default {
  components: {
    Header,
    Footer
  },
  mounted () {
    this.updateCount(2)
    this.updateCountAsync({ num: 5, time: 2000 })
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['fullName'])
  },
  methods: {
    ...mapActions(['updateCountAsync']),
    ...mapMutations(['updateCount'])
  }
}
</script>

<style lang="scss" scoped>
.app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  opacity: .9;
  z-index: -1;
}
</style>
